<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            height: 200%;
        }
    </style>
    <script>
        /*
            1.window.onload
                该方法会在页面所有的资源都加载完成后执行(图片、视频、dom)
                就像这个案例一样，把script标签写在了head里面，如果不用这个方法，就会出现报错。因为浏览器先加载script再加载后面的body，很明显没法找到这个id为app的div
        */
       window.onload = ()=>{
        let app = document.getElementById('app')
       }
    </script>
</head>
<body>
    <div id="app"></div>
    <script>
        /*
            window.onresize
                该方法会在窗口的尺寸发生变化时执行，多用于响应式等功能
        */
        window.onresize = ()=>{
            // 还记得怎么获取窗口的宽高吗?
            console.log(innerHeight,innerWidth)
        }

        /*
            window.onscroll
                该方法会在页面的滚动条滚动时执行，多用于一些粘性组件使用
        */
        window.onscroll = ()=>{
            console.log('scrolling!!!')
        }
    </script>
</body>
</html>